<template>
  <div class="search-page">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="history">
      <span>搜索历史</span>
      <span @click="del()">删除</span>
    </div>
    <van-tag
      v-for="(item, index) in historyList" :key="index"
      color="#F2F3F5" text-color="#4E5969" size="large" class="tag"
    >{{item}}</van-tag>
  </div>
</template>

<script>
export default {
  name: 'search-page',
  data () {
    return {
      value: '',
      historyList: []
    }
  },
  methods: {
    onSearch (val) {
      this.historyList.push(val)
    },
    onCancel () {
      this.$toast('取消')
    },
    del () {
      this.historyList = []
    }
  }
}
</script>

<style lang="less" scoped>
.search-page{
  .history{
    display: flex;
    justify-content: space-between;
    margin: 0 24px;
    span{
      font-size: 13px;
      color: #86909C;
    }
  }
  .tag{
    margin-left: 20px;
    margin-top: 10px;
  }
}
</style>
